<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .flex-container {
            display: flex;
            flex-direction: column;
            flex-wrap: wrap;
            /* flex-flow: row wrap; */
            justify-content: center;
            align-items: center;


        }

        .box {
            width: 200px;
            height: 200px;
        }
        .b1 {
            order: 1;
            flex-basis: 400px;
        }
        .b2 {
            order: 2;
            flex-shrink: 2;
        }
        .b3 {
            order: 3;
        }
        .f {
            display: flex;
            width: 500px;
            height: 100px;
            background-color: antiquewhite;
        }
        .aa {
            flex: 1;
            background-color: aqua;
            margin: 10px;
        }
    </style>
</head>

<body>
    <!-- <div class="flex-container">
        <div class="box b2" style="background-color: aqua;"></div>
        <div class="box b1" style="background-color: salmon"></div>
        <div class="box b3" style="background-color: rebeccapurple;"></div>
    </div> -->
    <div class="f">
        <div class="aa"></div>
        <div class="aa"></div>
        <div class="aa"></div>
    </div>
</body>

</html>